<template>
  <KView class="shop-goods-balance">
    <KView class="shop-balance-bg"></KView>
    <KView class="shop-balance-content">
      <KView class="shop-balance-count">
        <img class="sys-img" :src="balanceImg" mode="heightFix">
        <KView class="shop-balance-value">{{statData.totalCount}}</KView>
      </KView>
      <KView class="shop-balance-total">
        <span class="shop-balance-price">¥{{statData.totalPrice}}</span>
        <span v-if="statData.totalPrice!==statData.totalSourcePrice" class="shop-balance-sourcePrice">¥{{statData.totalSourcePrice}}</span>
      </KView>
      <KView class="shop-balance-btn" @click="toBalance">结算</KView>
    </KView>
  </KView>
</template>

<script>
  import GlobalData from 'utils/globalData';

  export default {
    props: {
      buyRecord: {
        type: Object,
        required: true
      }
    },

    watch: {
      'buyRecord.goodsModelIds'() {
        this.statData = this.buyRecord.getStatData();
      }
    },

    data() {
      return {
        balanceImg: GlobalData.images.shopMall.goodsBalance,
        statData: this.buyRecord.getStatData()
      };
    },

    methods: {
      toBalance() {
        this.$emit('goods-balance', this.buyRecord);
      }
    }
  };

</script>

<style lang="scss">
  @import '~style/shopGoodsBalance';

</style>
